---
sidebar_label: Free Brush
title: Free Brush
---
import CodeBlock from '@theme/CodeBlock'
import BrowserOnly from '@docusaurus/BrowserOnly'
import { PropsTable } from '@site/src/components/PropsTable'
import { generateScatterDataRecords } from '../utils/data'
import { XYWrapper, XYWrapperWithInput } from '../wrappers'

export const freeBrushProps = (showAxes = true) => ({
    name: "FreeBrush",
    height: 100,
    components: [{
        name: "Scatter",
        props: {
          x: d => d.x,
          y: d => d.y,
        },
        key: "components",
      },
    ],
    showAxes: showAxes,
    data: generateScatterDataRecords()
})

## Basic Configuration
_Free Brush_ is an extention of _Brush_, an interactive component that is designed to work inside an _XYContainer_.
See [brush docs](./Brush) to learn about basic configuration and usage.

## Mode
You can change the axis alignment of your _Free Brush_ by setting the `mode` property to `"x"`, `"y"` or `"xy"`:
<XYWrapperWithInput {...freeBrushProps()} height={300} property="mode" inputType="select" defaultValue="y" options={["x", "y", "xy"]}/>

## Auto Hide
Disabling the `autoHide` property will keep the _Free Brush_ selection visible after the [`onBrushEnd`](./Brush#usage) event has triggered:
<XYWrapper { ...freeBrushProps()} autoHide={false}/>

## CSS Variables
<details open>
  <summary open>All supported CSS variables and their default values</summary>
  <CodeBlock language="css">
{`--vis-free-brush-selection-fill-color: #0b1640;
--vis-free-brush-selection-fill-opacity: 0.4;
--vis-free-brush-selection-stroke-color: #acb2b9;
--vis-free-brush-handle-fill-color: #6d778c;
--vis-free-brush-handle-stroke-color: none;
 
/* Dark Theme */
--vis-dark-free-brush-selection-fill-color: #344174;
--vis-dark-free-brush-selection-stroke-color: #0b1640;
--vis-dark-free-brush-handle-fill-color: #6d778c;`}
  </CodeBlock>
</details>

## Component Props
<PropsTable name="VisFreeBrush"/>
